<!--  -->
<template>
    <div class='tool-tip-wrapper' :class="type">
        <p class="tooltip-text hy-35J" ref="tooltipText"></p>
        <div class="tooltip-trigger" ref="tooltipTrigger"></div>
        <div class="tooltip-circle-big-wrapper" ref="tooltipBigCircle">
            <div class="tooltip-circle-big"></div>
        </div>
        <div class="tooltip-circle-small-wrapper" ref="tooltipSmallCircle">
            <div class="tooltip-circle-small"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            // text: "民政厅前置机推送失败XX条!"
        };
    },
    props: ['text', 'type'],
    computed: {},
    watch: {
        text(){
            this.update()
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        init(){
            let tl = new TimelineMax()
            let tw1 = TweenMax.to(this.$refs.tooltipText, .3, {opacity: 1, scale: 1})
            let tw2 = TweenMax.to(this.$refs.tooltipTrigger, .3, {opacity: 1, top: '30px'})
            let tw3 = TweenMax.to(this.$refs.tooltipBigCircle, .3, {opacity: 1, scale: 1})
            let tw4 = TweenMax.to(this.$refs.tooltipSmallCircle, .3, {opacity: 1, scale: 1, top: '28px'})
            let tw5 = TweenMax.to(this.$refs.tooltipText, 1, {scrambleText: {
                text: this.text,
                chars: '_ ',
                speed: 0.3  
            }})
            // let tw7 = TweenMax.to(this.$refs.tooltipBigCircle, .5,  {opacity: 0, scale: 1.2, repeat: -1, yoyo: true})
            tl.addLabel('start')
                .add(tw1, 'start+=0.4')
                .add(tw5, 'start+=0.5')
                .add(tw2, 'start+=0.3')
                .add(tw3, 'start+=0')
                .add(tw4, 'start+=0.2')
            return tl;
        },
        update(){
            TweenMax.to(this.$refs.tooltipText, 1, {scrambleText: {
                text: this.text,
                chars: '_ ',
                speed: 0.3  
            }})
        }
    },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.tool-tip-wrapper {
    position: absolute;
    height: 100px;
   .tooltip-text{
        padding: 0 10px;
       background: url('../../assets/imgs/center/error-bg.png') no-repeat;
       background-size: 100% 100%;
       font-size: 14px;
       color: #ed3445;
       text-align: center;
       opacity: 0;
       transform: scale(0);
   } 
   .tooltip-trigger {
       position: absolute;
       right: 125px;
       top: 40px;
       width: 0px;
       height: 5px;
       border: 6px solid transparent;
       border-top: 6px solid #ed3445;
       opacity: 0;
   }
   .tooltip-circle-small-wrapper {
       position: absolute;
       width: 30px;
       height: 30px;
        right: 116px;
       top: 35px;
       opacity: 0;
       transform: scale(0);
       .tooltip-circle-small{
           width: 100%;
           height: 100%;
           border-radius: 50%;
           perspective: 500px;
           transform: rotateX(60deg);
            border: 1px solid rgba(237, 52, 69, .6);
            background: radial-gradient(circle, rgba(237, 52, 69, 0), rgba(237, 52, 69, .6));
       }
   }
   .tooltip-circle-big-wrapper {
       position: absolute;
       width: 50px;
       height: 50px;
       right: 106px;
       top: 22px;
       opacity: 0;
       transform: scale(0);
       .tooltip-circle-big{
           width: 100%;
           height: 100%;
           border-radius: 50%;
           perspective: 500px;
           transform: rotateX(56deg);
            border: 1px solid rgba(237, 52, 69, .24);
            background: radial-gradient(circle, rgba(237, 52, 69, 0), rgba(237, 52, 69, .3));
       }
   }
}
.warn{
    .tooltip-text{
        padding: 0 10px;
       background: url('../../assets/imgs/center/warn-bg.png') no-repeat;
       background-size: 100% 100%;
       color: #faa23f;
   } 
   .tooltip-trigger {
       border-top: 6px solid #faa23f;
   }
   .tooltip-circle-small-wrapper {
       .tooltip-circle-small{
            border: 1px solid rgba(250, 126, 63, .6);
            background: radial-gradient(circle, rgba(250, 126, 63, 0), rgba(250, 126, 63, .6));
       }
   }
   .tooltip-circle-big-wrapper {
       .tooltip-circle-big{
            border: 1px solid rgba(250, 126, 63, .3);
            background: radial-gradient(circle, rgba(250, 126, 63, 0), rgba(250, 126, 63, .3));
       }
   }
}
</style>